<template>
    <div class="home-products">
        <van-tabs v-model="active" animated sticky offset-top="50px" class="home-products-tabs" :border="false"
                  :class="{'home-products-tabs-fixed': tabsFixed}"
                  @scroll="handleTabsScroll">
            <van-tab>
                <template #title>
                    <div class="home-products-tab-title">
                        <span class="home-products-tab-name">精选</span>
                        <span class="home-products-tab-description" v-show="!tabsFixed">为你推荐</span>
                    </div>
                </template>
                <product-list/>
            </van-tab>
            <van-tab>
                <template #title>
                    <div class="home-products-tab-title">
                        <span class="home-products-tab-name">新品</span>
                        <span class="home-products-tab-description" v-show="!tabsFixed">夏日换新</span>
                    </div>
                </template>
                <product-list sort="created_time:asc"/>
            </van-tab>
            <van-tab>
                <template #title>
                    <div class="home-products-tab-title">
                        <span class="home-products-tab-name">手机</span>
                        <span class="home-products-tab-description" v-show="!tabsFixed">探索黑科技</span>
                    </div>
                </template>
                <product-list name="手机"/>
            </van-tab>
            <van-tab>
                <template #title>
                    <div class="home-products-tab-title">
                        <span class="home-products-tab-name">电器</span>
                        <span class="home-products-tab-description" v-show="!tabsFixed">数码家电</span>
                    </div>
                </template>
                <product-list name="电器"/>
            </van-tab>
            <van-tab>
                <template #title>
                    <div class="home-products-tab-title">
                        <span class="home-products-tab-name">时尚</span>
                        <span class="home-products-tab-description" v-show="!tabsFixed">潮流生活</span>
                    </div>
                </template>
                <product-list name="时尚"/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
  import ProductList from "../../components/product/ProductList"
  import { Tab, Tabs } from "vant"

  export default {
    name: "HomeProducts",
    components: {
      ProductList,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
    },
    data() {
      return {
        active: 0,
        tabsFixed: false,
      }
    },
    methods: {
      handleTabsScroll({ isFixed }) {
        this.tabsFixed = isFixed
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .home-products-tabs {
        ::v-deep .van-tabs__wrap {
            /*margin-bottom: 12px;*/
        }

        ::v-deep .van-tabs__nav {
            background: inherit;
            margin-bottom: 12px;
        }

        ::v-deep .van-tabs__line {
            display: none;
        }

        ::v-deep .van-tab--active {
            .home-products-tab-name {
                font-size: 20px;
            }

            .home-products-tab-description {
                color: $red;
            }
        }
    }

    .home-products-tabs-fixed {
        ::v-deep .van-tabs__wrap {
            background: #fff;
        }

        ::v-deep .van-tab--active {
            .home-products-tab-name {
                color: $red;
            }
        }
    }

    .home-products-tab-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: initial;

        .home-products-tab-name {
            font-size: 16px;
        }

        .home-products-tab-description {
            font-size: 12px;
            color: $gray-6;
        }

    }
</style>
